{% extends 'base.html' %}{% load i18n %}
{% block title %}add event{% endblock title %}
{% block add_js %}
	<link rel="stylesheet" href="/media/css/jqui.flora.datepicker.css" type="text/css" media="screen">
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ MAPS_API_KEY }}" type="text/javascript"></script>
	<script src="/media/js/jquery-1.2.1.js" type="text/javascript"></script>
	<script src="/media/js/jquery.jmap2.js" type="text/javascript"></script>
	<script src="/media/js/ui.datepicker.js" type="text/javascript"></script>{% endblock add_js %}
{% block main_content %}
<form id="addform" method="post" action="/add/">
{% if errors %}
	{% trans "Some errors was found in the form" %}
	{% if errors.lat or errors.lng %}
	<div>{% trans "select some point at the map please" %}</div>
	{% endif %}
{% endif %}
<table width="400" border="0">
	<tr>
		<td width="100"><label for="id_title">{% trans "Title:" %}</label></td>
		<td width="300">{{ f.title }} {{ errors.title }}</td>
	</tr>
	<tr>
		<td><label for="id_description">{% trans "Description:" %}</label></td>
		<td>{{ f.description }} {{ errors.description }}</td>
	</tr>
	<tr>
		<td><label for="id_country">{% trans "Country:" %}</label> </td>
		<td>{{ f.country }} {{ errors.country }}</td>
	</tr>
	<tr>
		<td><label for="id_city">{% trans "City:" %}</label></td>
		<td>{{ f.city }} {{ errors.city }}</td>
	</tr>
	<tr>
		<td><label for="id_place">{% trans "Place:" %}</label> </td>
		<td>{{ f.place }} {{errors.place }}</td>
	</tr>
	<tr>
		<td><label for="id_street">{% trans "Street:" %}</label> </td>
		<td>{{ f.street }} {{ errors.street }}</td>
	</tr>
	<tr>
		<td><label for="id_start_date">{% trans "From" %}</label> </td>
		<td>{{ f.start_date }} {{ errors.start_date }}</td>
	</tr>
	<tr>
		<td><label for="id_end_date">{% trans "Till" %}</label> </td>
		<td>{{ f.end_date }} {{ errors.end_date }}</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="submit" value="{% trans "add" %}"/>
		</td>
	</tr>
</table>
<br>
{{ f.lat.as_hidden }}{{ f.lng.as_hidden }}
</form>	
<span class="hint">doubleclick to add place, grag to change</span>
    <div id="gmap"></div>
	<div id="gdirections"></div>
		<script type="text/javascript">
		$(document).ready(function() {
			$('#id_start_date').datepicker({ dateFormat: 'yy-mm-dd' });
			$('#id_end_date').datepicker({ dateFormat: 'yy-mm-dd' });
			$('#gmap').jmap({mapEnableDoubleClickZoom:false});
			
			var place_marker = false
			function update_geoloc(point) {
				$('#id_lat').val(point.lat());
				$('#id_lng').val(point.lng());
			}
			
			function create_place_marker(overlay, point) {
				update_geoloc(point);
				if (!place_marker) {
					place_marker = new GMarker(point,{draggable:true})
					$.jmap.GMap2.addOverlay(place_marker)
				}
				GEvent.addListener(place_marker,'dragend',function() { update_geoloc(place_marker.getLatLng())})
			}
			
			if ($('#id_lat').val() && $('#id_lng').val()) {
				create_place_marker(false,new GLatLng($('#id_lat').val(),$('#id_lng').val()))
			} else {
				GEvent.addListener($.jmap.GMap2,'dblclick',create_place_marker)
			}
			
		});
</script>
{% endblock main_content %} 
